<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="类型名称" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
				<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
			</div>
			<el-table v-loading="loading" :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="类型名称"></el-table-column>
				<el-table-column label="状态" align="center">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
						<el-tag type="danger" v-if="scope.row.status == 0">禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" :min-width="160" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<el-button text :icon="Edit" @click="handleEdit(scope.row)">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="query.total"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editVisible" width="50%">
			<el-form label-width="70px">
				<el-form-item label="序号">
					<el-input v-model="editForm.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="类别名称">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="editForm.status">
						<el-radio :label="1" :model-value="1">正常</el-radio>
						<el-radio :label="0" :model-value="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>


		<!-- 新增弹出框 -->
		<el-dialog title="新增" v-model="addVisible" width="50%">
			<el-form label-width="70px">
				<el-form-item label="类别名称">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-radio-group v-model="addForm.status">
						<el-radio :label="1" :model-value="1">正常</el-radio>
						<el-radio :label="0" :model-value="0">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveAdd">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import { getTypeListApi, addTypeApi, updateTypeApi, deleteTypeApi} from '../api/index';

const query = reactive({
	name: '',
	pageNum: 1,
	pageSize: 10,
	total: 0
});
const loading = ref(false);
const tableData = ref([]);

// 获取表格数据
const getData = async () => {
	loading.value = true;
	const res = await getTypeListApi(query);
	if (res) {
		tableData.value = res.data.content;
		query.total = res.data.count;
	}
	loading.value = false;
};
getData();

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	getData();
};

// 删除操作
const handleDelete = (id: number) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		const res = await deleteTypeApi(id);
		if (res) {
			ElMessage.success('删除成功');
			await getData();
		}
	}).catch(() => {});
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let editForm = reactive({});
const handleEdit = (row: any) => {
	Object.keys(row).map((key: any) => editForm[key] = row[key]);
	editVisible.value = true;
};
const saveEdit = async () => {
	if (!validForm(editForm)) {
		return ;
	}
	const res = await updateTypeApi(editForm);
	if (res) {
		ElMessage.success("修改成功");
		editVisible.value = false;
		await getData();
	}
};

// 表格新增时弹窗和保存
const addVisible = ref(false);
let addForm = reactive({
	name: "",
	status: 1
});
const handleAdd = () => {
	addForm.name = "";
	addForm.status = 1;
	addVisible.value = true;
};
const saveAdd = async () => {
	if (!validForm(addForm)) {
		return ;
	}
	const res = await addTypeApi(addForm);
	if (res) {
		ElMessage.success("添加成功");
		addVisible.value = false;
		await getData();
	}
};

const validForm = (form: any) => {
	if (!form.name) {
		ElMessage.warning("名称不能为空");
		return false;
	}
	if (!form.status && form.status != 0) {
		ElMessage.warning("状态不能为空");
		return false;
	}
	return true;
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
